import { Link, Route, Switch } from "react-router-dom";
import useList from "../hooks/use-list"
import PlantDetail from "./PlantDetail";
const PlantList = () => {
    const [list, loading, collect] = useList();
    const collectList = list.filter(item=>item.isCollect);
    return (
        <div style={{display:'flex'}}>
            <div>
                <button>
                    <Link to="/plantList/table">表格统计</Link>
                </button>
                <h2>鲜花列表</h2>
                {
                    loading
                        ? 'loading......'
                        : list.map(item => (
                            <li key={item.plantID}>
                                <Link to={'/plantList/' + item.plantID}>{item.name}</Link>
                                <button
                                    onClick={() => collect(item.plantID)}
                                >
                                    {
                                        item.isCollect
                                            ? '取消收藏'
                                            : '收藏'
                                    }
                                </button>
                            </li>
                        ))
                }
            </div>
            <div>
                {/* 注意path的前缀一定和父级path一样 */}
                <Switch>
                    <Route path="/plantList/table">
                        <h2>表格</h2>
                    </Route>
                    <Route path="/plantList/:id">
                        <PlantDetail />
                    </Route>
                    <Route path="/plantList">
                        <h2>请选择一个花</h2>
                    </Route>
                </Switch>
            </div>
        </div>
    )
}

export default PlantList